<template>
  
    
    <div class="bofy_total_table">
      <div class="table_info">
        <el-button @click="DCTable" class="position_button_s" type="primary">导出</el-button>
        <el-table
          :data="tableDataType"
          height="650px"
         
          border
          :expand-row-keys="expandArrType"
          @expand-change="expandChangeType"
          :header-cell-style="{ background: '#fafbfc', color: '#333333' }"
          :row-key="
              (row) => {
                return row.ids;
              }
            "
        >
        <el-table-column type="expand">
          <template #default>
           <div class="table_setion_N">
            <div class="zkDetail">
              <el-icon><List /></el-icon>
              <span>展开详情</span>
            </div>
            <el-table
            style="{width: 100%;}"
          :data="rowsDataType"
          max-height="350px"
          border
         >
       
      <el-table-column
      width="200"
     
        prop="descriptionZh"
        label="描述（中文）"
      >
      <template #header>
                              <div class="filter_item">
                                <span>描述（中文）</span>
                                <filterCom :options="allDescriptionZh" @chooseItem="choosedescriptionZh"></filterCom>
                              </div>
                            </template>
      <template #default="props">
        <el-tooltip
        class="box-item"
        effect="dark"
        :content="props.row.descriptionZh"
        placement="top-start"
      >
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{props.row.descriptionZh}}</div>
      </el-tooltip>
      </template>
    </el-table-column>

      <el-table-column
      width="300"
   
        prop="descriptionEn"
        label="描述（英文）"
      >
      <template #header>
 <div class="filter_item">
                                <span>描述（英文）</span>
        <filterCom :options="allDescriptionEN" @chooseItem="choosedescriptionEn"></filterCom>
                              </div>
                            </template>
      <template #default="props">
        <el-tooltip
        class="box-item"
        effect="dark"
        :content="props.row.descriptionEn"
        placement="top-start"
      >
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{props.row.descriptionEn}}</div>
      </el-tooltip>
      </template>
    </el-table-column>

    <el-table-column
      width="100"
        prop="size1"
        label="尺寸1"
      >
      <template #header>
 <div class="filter_item">
                                <span>尺寸1</span>
        <filterCom :options="size1Option" @chooseItem="chooseSize1"></filterCom>
                              </div>
                            </template>
    </el-table-column>

      <el-table-column
      width="100"
        prop="size2"
        label="尺寸2"
      >
      <template #header>
 <div class="filter_item">
                                <span>尺寸2</span>
        <filterCom :options="size2Option" @chooseItem="chooseSize2"></filterCom>
                              </div>
                            </template>
    
    </el-table-column>
      <el-table-column
      width="100"
        prop="num"
        label="数量"
      >
      <template #default="props">
      {{props.row.num}} {{ props.row.unit }}
      </template>
    </el-table-column>

    <el-table-column
      width="150"
        prop="encoding"
        label="编码"
      >
      <template #default="props">
        <el-tooltip
        class="box-item"
        effect="dark"
        :content="props.row.encoding"
        placement="top-start"
      >
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{props.row.encoding}}</div>
      </el-tooltip>
      </template>
    </el-table-column>
    
     </el-table>
     <div class="pageF2">
          <el-pagination
            v-model:current-page="pageNumDetailType"
            v-model:page-size="pageSizeDetailType"
            :page-sizes="[20, 50, 100]"
            background
            layout="total, prev, pager, next"
            :total="totalDetailType"
            @size-change="handleSizeChangeDetailType"
            @current-change="handleCurrentChangeDetailType"
          />
        </div>
    
    
           </div>
          </template>
        </el-table-column>  
    
           <el-table-column
        
           prop="majorName"
            label="主项"
          ></el-table-column>
    
          <el-table-column
         
         
            prop="bmName"
            label="管线号"
          >
   
          <template #default="props">
            <el-tooltip
            class="box-item"
            effect="dark"
            :content="props.row.bmName"
            placement="top-start"
          >
            <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{props.row.bmName}}</div>
          </el-tooltip>
          </template>
        </el-table-column>
    
        <el-table-column
       
         prop="pipingClass"
         label="管道等级"
       >
     
       <template #header>
                               <div class="filter_item">
                                 <span>管道等级</span>
                                 <filterCom :options="allpipingClass" @chooseItem="choosepipingClass"></filterCom>
                               </div>
                             </template>
     </el-table-column>
 
     </el-table>
    
        <div class="pageF">
          <el-pagination
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            :page-sizes="[20, 50, 100]"
            background
            layout="total, sizes, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    
    
      <div class="charts_left">
        <div class="position_select">
          <el-select-v2
          style="width: 80px;"
    v-model="GZdATA"
    :options="[
      {
        value:'pipes',
        label:'管子',
      },
      {
        value:'fittings',
        label:'管件',
      },
      {
        value:'bolts',
        label:'螺栓',
      },
      {
        value:'gaskets',
        label:'垫片',
      },
    ]"
    placeholder="请选择"
    size="small"
  />

        </div>
        <Echart id="GX" :data="TypeData"></Echart>
    
      </div>
    </div>
    
    
    </template>
    
    <script setup>
    import { ElNotification } from 'element-plus'
    import filterCom from "../components/filter.vue";
    import Echart from '../../src/components/echart.vue'
    import { onMounted, ref, watch } from "vue";
    import { getExportData2,MBInfoData,selectSize2,selectSize1 ,selectMajorData,MBInfoDetailData2,MBInfoData2,MBInfoDetailData,EchartGX,getZH,getEN,getClass} from "../https/api/table.js";
   
   let props =  defineProps({
    valueMajor:{
        default:'',
        type:String,
    },
    valueXM:{
      default:'',
      type:String,
    }
   })
    let total = ref(0);
    let GZdATA = ref('pipes')


    
let DCTable =async () => { 
  ElNotification({
    title: '正在导出',
    message: '正在导出，请稍等.....',
    type: 'warning',
    duration:0,
  })
let res = await getExportData2(
  {  size1:size1Data.value,
          size2:size2Data.value,
        projectCode:props.valueXM,
        major:props.valueMajor,
        pipingClass:pipingClass.value,
        pageNum: pageNumDetailType.value,
        descriptionZh:descriptionZh.value,
        descriptionEn:descriptionEn.value,
    pageSize: pageSizeDetailType.value,}
)

if(res.code = 200 ){
  ElNotification.closeAll()
     var x = new XMLHttpRequest();
    x.open(
      "GET",
      `http://10.6.70.105:8034${res.path}`,
      true
    );
    x.responseType = "blob";
    x.onload = function (e) {
      var url = window.URL.createObjectURL(x.response);
      var a = document.createElement("a");
      a.href = url;
      a.download = "料单信息（管线）";
      a.click();
    };
    x.send();
  }

}


    watch(GZdATA,()=>{
      GZdATA.value == 'pipes' ?  TypeData.value.title.text = `管子数据概览` : ''
  GZdATA.value == 'fittings' ?  TypeData.value.title.text = `管件数据概览` : ''
  GZdATA.value == 'bolts' ?  TypeData.value.title.text = `螺栓数据概览` : ''
  GZdATA.value == 'gaskets' ?  TypeData.value.title.text = `垫片数据概览` : ''
      getEchartsType({projectCode:props.valueXM,major:props.valueMajor,type:GZdATA.value})
})

  let size1Option = ref([])
  let size1Data = ref([])
  let chooseSize1 = (val) => {
  size1Data.value = val
}

    
    
    let loading = ref(false)
    
    let expandedRowsCommon = ref({})
    let expandArrType = ref([]);
    let expandChangeType = (expandedRows) => {
     
      if (!expandArrType.value.includes(expandedRows.ids)) {
        expandArrType.value = [];
        expandArrType.value.push(expandedRows.ids);
      } else {
        expandArrType.value = [];
      }
      expandedRowsCommon.value = {...expandedRows}
    
      // 获取中文英文描述
     
      getSelectdescriptionZh({projectCode:props.valueXM,major:props.valueMajor, size1:size1Data.value,
          size2:size2Data.value, descriptionZh:descriptionZh.value,
        descriptionEn:descriptionEn.value,})
      getSelectdescriptionEN({projectCode:props.valueXM,major:props.valueMajor,size1:size1Data.value,
          size2:size2Data.value, descriptionZh:descriptionZh.value,
        descriptionEn:descriptionEn.value,})
      getRowData({
        size1:size1Data.value,
          size2:size2Data.value,
        projectCode:props.valueXM,
        major:props.valueMajor,
        ...expandedRowsCommon.value,
        pageNum: pageNumDetailType.value,
        descriptionZh:descriptionZh.value,
        descriptionEn:descriptionEn.value,
    pageSize: pageSizeDetailType.value,  
      })

     
      getSize1Data({  major:props.valueMajor,
    projectCode:props.valueXM,size1:size1Data.value,
          size2:size2Data.value, descriptionZh:descriptionZh.value,
        descriptionEn:descriptionEn.value,})
    getSize2Data({  major:props.valueMajor,
    projectCode:props.valueXM,size1:size1Data.value,
          size2:size2Data.value, descriptionZh:descriptionZh.value,
        descriptionEn:descriptionEn.value,})

      // getEchartsType({})
    }
    
    let getSize2Data =async (data) => {
  let res = await selectSize2(data)
  size2Option.value = res.data.map(v=>{
    return {
      value:v&&v.value,
      label:v&&v.value
    }
  })
}
let getSize1Data =async (data) => {
  let res = await selectSize1(data)
  size1Option.value = res.data
}    

    let allpipingClass = ref([])
    let choosepipingClass = (val)=>{
      pipingClass.value = val;
    
    }
    
    let getsELECTpipingClass =async (data) => { 
      let res = await getClass(data)
      allpipingClass.value = res.data.map((v)=>{
        return {
          value:v.value,
          label:v.value
        }
      })
    }
    
    let getEchartsType = async (data) => { 
      let res = await EchartGX(data)
    TypeData.value.yAxis.data = res.data.map(v=>v.name)
    TypeData.value.series[0].data = res.data.map(v=>v.value)
    }
    
    let rowsDataType = ref([])
    let pageSizeDetailType = ref(10)
    let pageNumDetailType = ref(1)
    let totalDetailType = ref(0)
    let getRowData = async (data) => {
    let res = await MBInfoDetailData2(data)
    
    rowsDataType.value = res.data.map((v,i)=>{
      return{
        ...v,
        ids:i
      }
    })
    totalDetailType.value = res.total
    }
    
    
    let handleSizeChangeDetailType = (val) => {
      pageSizeDetailType.value = val
      getRowData({
        size1:size1Data.value,
          size2:size2Data.value,
        projectCode:props.valueXM,
        major:props.valueMajor,
        ...expandedRowsCommon.value,
        pageNum: pageNumDetailType.value,
        descriptionZh:descriptionZh.value,
        descriptionEn:descriptionEn.value,
    pageSize: pageSizeDetailType.value,  
      })
    
    }
    
    let handleCurrentChangeDetailType = (val) => {
      pageNumDetailType.value = val
      getRowData({
        size1:size1Data.value,
          size2:size2Data.value,
        projectCode:props.valueXM,
        major:props.valueMajor,
        ...expandedRowsCommon.value,
        pageNum: pageNumDetailType.value,
        descriptionZh:descriptionZh.value,
        descriptionEn:descriptionEn.value,
    pageSize: pageSizeDetailType.value,  
      })
    }
    
    
    let TypeData = ref( {
      dataZoom: [
            {
               start:0,//默认为0
               end: 200,//默认为100
               type: 'slider',
               maxValueSpan:50,//显示数据的条数(默认显示10个)
               show: true,
               yAxisIndex: [0],
               handleSize: 0,//滑动条的 左右2个滑动条的大小
               height: '30%',//组件高度
              //  left: 0, //左边的距离
               right: 0,//右边的距离
               top: 0,//上边边的距离
              //  borderColor: "rgba(43,48,67,0.8)",
              //  fillerColor: '#33384b',//滑动块的颜色
              //  backgroundColor: 'rgba(13,33,117,0.3)',//两边未选中的滑动条区域的颜色
               showDataShadow: false,//是否显示数据阴影 默认auto
               showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
               realtime:true, //是否实时更新
               filterMode: 'filter',
               yAxisIndex: [0,1],//控制的y轴
            },
            //滑块的属性
            {
              zoomOnMouseWheel: false,  // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true,  // 鼠标移动能触发数据窗口平移 
               type: 'inside',
               show: true,
               yAxisIndex: [0,1],
               start: 1,//默认为1
               end: 20,//默认为100
            },
        ],
      title: {
        x:'center',
        text: '管子数据概览',
        textStyle:{
          color:'#0081ff',
          fontWeight:'bolder',
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        show:false,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        axisLabel:{ 
          interval: 0,
          rotate: 20, 
          formatter: function (value) {
                        if (value.length > 8) {
                          return `${value.slice(0, 8)}...`;
                        }
                        return value;
                      } 
        },
        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
      },
      series: [
        {
          name: '2011',
          type: 'bar',
          data: [18203, 23489, 29034, 104970, 131744, 630230],
          itemStyle: {
                normal: {
    　　　　　　　　//这里是重点
                    color: function(params) {
                      var colorList = ['#74c4dc', '#5973c1','#68b676','#ed6969','#fbc85f' ,'#0081ff']; 
                 return colorList[params.dataIndex % colorList.length];
                    }
                }
            }
    
        },
     
      ]
    })
    
    
    let selectMajorOptions = ref([])
    let remoteMethod = (query) => {
      loading.value = true
     if (query) {
         new Promise((resolve) => {
     
           selectMajorOptions.value = majorAllArr.value.filter((item) => {
    
            return item.label.toLowerCase().includes(query.toLowerCase())
          })
            resolve(selectMajorOptions.value)
           }).then(() => {
           loading.value = false
          })
    
          
      } else {
        selectMajorOptions.value = []
        loading.value = false
      }
    }
    
    let handleSizeChange = (val) => {
      pageSize.value = val
      getMBInfoData({
        projectCode:props.valueXM,
        major:props.valueMajor,
        pageNum: pageNum.value,
        pipingClass:pipingClass.value,
       pageSize: pageSize.value,
      });
    
    }
    
    let handleCurrentChange = (val) => {
      pageNum.value = val
      getMBInfoData({
        projectCode:props.valueXM,
        major:props.valueMajor,
        pageNum: pageNum.value,
        pipingClass:pipingClass.value,
       pageSize: pageSize.value,
      });
    }
    
    let pageNum = ref(1);
    let pageSize = ref(20);
    
    let tableDataType = ref([])
    let getMBInfoData = async (data) => {
      let res = await MBInfoData2(data);
      if (res.code == 200) {
    
        tableDataType.value = res.data.map((v,i)=>{
           return {
            ...v,
            ids:i
           }
        })
        total.value = res.total
      }
    };
    
    let majorAllArr = ref([])
    let getSelectMajor = async (data) => {
      let res = await selectMajorData(data);
      if (res.code == 200) {
        majorAllArr.value = res.data
       
        
      }
    };
    
    

    
    
    let allDescriptionZh = ref([])
    let descriptionZh = ref([])
    let choosedescriptionZh = (val) => {
      descriptionZh.value = val
    }
    
    let descriptionEn = ref([])
    let choosedescriptionEn = (val) => {
      descriptionEn.value = val
    }
   
    let size2Option = ref([])
    let size2Data = ref([])
    let chooseSize2 = (val) => {
  size2Data.value = val
}

    let pipingClass = ref([])
    watch([descriptionZh,descriptionEn,size1Data,size2Data],()=>{
      getSize1Data({  major:props.valueMajor,
    projectCode:props.valueXM,size1:size1Data.value,
          size2:size2Data.value, descriptionZh:descriptionZh.value,
        descriptionEn:descriptionEn.value,queryType:'queryByType'})
    getSize2Data({  major:props.valueMajor,
    projectCode:props.valueXM,size1:size1Data.value,
          size2:size2Data.value, descriptionZh:descriptionZh.value,
        descriptionEn:descriptionEn.value,queryType:'queryByType'})
        getSelectdescriptionZh({projectCode:props.valueXM,major:props.valueMajor, size1:size1Data.value,
          size2:size2Data.value, descriptionZh:descriptionZh.value,
        descriptionEn:descriptionEn.value,queryType:'queryByType'})
      getSelectdescriptionEN({projectCode:props.valueXM,major:props.valueMajor,size1:size1Data.value,
          size2:size2Data.value, descriptionZh:descriptionZh.value,
        descriptionEn:descriptionEn.value,queryType:'queryByType'})
        getRowData({
          size1:size1Data.value,
          size2:size2Data.value,
          projectCode:props.valueXM,
        major:props.valueMajor,
        ...expandedRowsCommon.value,
        pageNum: pageNumDetailType.value,
        descriptionZh:descriptionZh.value,
        descriptionEn:descriptionEn.value,
    pageSize: pageSizeDetailType.value,  
      })
    })
    
   
    
    
    watch([pipingClass],()=>{
        getMBInfoData({
        pageNum: pageNum.value,
        projectCode:props.valueXM,
        major:props.valueMajor,
        pipingClass:pipingClass.value,
       
       pageSize: pageSize.value,
      });
    
    })
    
    onMounted(() => {
      // document.querySelector('.charts_left').style.height = `${window.innerHeight - 160}px`
      document.querySelector('.charts_left').style.height  = '650px'
     // 
    
      
      /***********/
    });
    
    
    
    let getSelectdescriptionZh =async (data) => { 
      let res = await getZH(data)
      allDescriptionZh.value = res.data.map(v=>{
        return {
          value: v.value,
          label: v.value
        }
      })
    }
    
    let allDescriptionEN = ref([])
    let getSelectdescriptionEN =async (data) => { 
      let res = await getEN(data)
      allDescriptionEN.value = res.data.map(v=>{
        return {
          value: v.value,
          label: v.value
        }
      })
    }
    


    watch(props,()=>{
      console.log(props)

      getsELECTpipingClass({projectCode:props.valueXM,major:props.valueMajor,})
      getMBInfoData({
        projectCode:props.valueXM,
        major:props.valueMajor,
        pageNum: pageNum.value,
        pipingClass:pipingClass.value,
       pageSize: pageSize.value,
      });
      getEchartsType({projectCode:props.valueXM,major:props.valueMajor,type:GZdATA.value})

    },{immediate:true})

    </script>
    
    <style lang="less" scoped>

.table_info{
  position: relative;
  .position_button_s{
    position: absolute;
    top: -20px;
    right: 20px;
  }
  /deep/  .el-table__cell{
    padding: 3px 0;
  }
}
    .filter_item {
      display: flex;
      align-items: center;
      span {
        margin-right: 5px;
      }
    }
    .charts_left{
      position: relative;
      display: flex;
      width: 30%;
      height: 762px;
      align-items: center;
      justify-content: center;
      .position_select{
        z-index: 99;
        display: flex;
    align-items: center;
    left: 20px;
    top: 10px;
    position: absolute;
  }
    }
    .table_setion_N{
      padding: 15px 25px;
      .zkDetail{
        color: #0081ff;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: bolder;
      }
    }
    .p_titel_list{
      font-size: 20px;
      font-weight: bold;
    }
    .bofy_total_table{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .table_info{
      width: 70%;
    }
    }
    .header_Table{
      padding: 20px 30px;
      .select{
        color: #0081ff;
        
        margin-right: 20px;
      }
    }
    .header_Table{
      display: flex;
      align-items: center;
     
    }
    .table_info {
      padding: 20px;
    }
    .pageF {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: row-reverse;
    }
    .pageF2{
      margin-top: 40px;
      width: 100%;
      
    }


    @media screen and (max-width: 1400px) {  
  .header_Table .select{
    font-size: 10px;
  }
  .m-2{
    width:100px;
  }
  .el-select-v2{
    width:130px!important;
  }
  // .bofy_total_table{
  //   align-items: normal;
  // }
  .charts_left .position_select{
 top: -36px;
  }
  .bofy_total_table{
    margin-top:30px;
  }
}  
    
    </style>
    